<template>
    <div ref="mainContainer" class="mainContainer">
        <div ref="viewerContainer" class="viewer">
            <vc-viewer
                ref="vcViewer"
                :animation="animation"
                :baseLayerPicker="baseLayerPicker"
                :homeButton="homeButton"
                :fullscreenButton="fullscreenButton"
                :fullscreenElement="fullscreenElement"
                :infoBox="infoBox"
                :sceneMode="sceneMode"
                :sceneModePicker="sceneModePicker"
                :timeline="timeline"
                @ready="ready"
            >
                <vc-navigation :options="navOptions"></vc-navigation>
                <!-- 0. 加载Cesium官方提供的3D地形数据：-->
                <vc-provider-terrain-cesium ref="terrain">
                </vc-provider-terrain-cesium>
                <!--
                <vc-provider-terrain-arcgis-tiled-elevation ref="terrain">
                </vc-provider-terrain-arcgis-tiled-elevation>
                -->
                <!-- 1. 天地图img（卫星影像）图层： -->
                <vc-layer-imagery
                    :rectangle="satelliteImgRect"
                >
                    <vc-provider-imagery-tianditu
                        :token="tk"
                        mapStyle="img_c"
                    ></vc-provider-imagery-tianditu>
                </vc-layer-imagery>

                <!-- 2. 天地图ibo（全球国界省界）图层： -->
                <vc-layer-imagery ref="layerInternationalBorders" :maximum-terrain-level="19">
                    <vc-provider-imagery-tianditu
                        :token="tk"
                        mapStyle="ibo_w"
                    ></vc-provider-imagery-tianditu>
                </vc-layer-imagery>

                <!-- 3.天地图cia（路网信息）图层： -->
                <vc-layer-imagery ref="layerText" :maximum-terrain-level="19">
                    <vc-provider-imagery-tianditu
                        :token="tk"
                        mapStyle="cia_w"
                    ></vc-provider-imagery-tianditu>
                </vc-layer-imagery>
            </vc-viewer>
        </div>
        <ul class="mapOptionContainer">
            <li>
                <el-switch v-model="animation"></el-switch>
                <span>回溯播放</span>
            </li>
            <li>
                <el-switch v-model="timeline"></el-switch>
                <span>回溯时间轴</span>
            </li>
            <li>
                <el-switch v-model="homeButton"></el-switch>
                <span>显示Home按钮</span>
            </li>
            <li>
                <el-switch v-model="sceneModePicker"></el-switch>
                <span>显示3D/2D按钮</span>
            </li>
            <!--<li>-->
            <!--  <el-switch v-model="baseLayerPicker"></el-switch>-->
            <!--  <span>基础图层拾取器</span>-->
            <!--</li>-->
            <li>
                <el-switch v-model="infoBox"></el-switch>
                <span>右侧弹出信息框</span>
            </li>
            <li>
                <el-switch v-model="navOptions.enableCompass"></el-switch>
                <span>显示罗盘</span>
            </li>

            <li>
                <el-switch v-model="navOptions.enableZoomControl"></el-switch>
                <span>显示缩放按钮</span>
            </li>
            <li>
                <el-switch v-model="navOptions.enablePrintView"></el-switch>
                <span>显示打印按钮</span>
            </li>
            <li>
                <el-switch v-model="navOptions.enableMyLocation"></el-switch>
                <span>显示GPS定位按钮</span>
            </li>
            <!--<li>-->
            <!--    <el-switch v-model="navOptions.enableCompassOuterRing"></el-switch>-->
            <!--    <span>罗盘外环是否可用</span>-->
            <!--</li>-->
            <li>
                <el-switch v-model="navOptions.enableLocationBar"></el-switch>
                <span>底部显示经纬度</span>
            </li>
            <li>
                <el-switch v-model="navOptions.enableDistanceLegend"></el-switch>
                <span>底部显示比例尺</span>
            </li>
            <li>
                <el-switch v-model="fullscreenButton"></el-switch>
                <span>底部显示全屏按钮</span>
            </li>
        </ul>
    </div>
</template>

<script>
import '@/plugins/vue-cesium'

// 用到的图片资源
import STAR_PNG from '@/assets/images/star.png'

export default {
    components: {
    },
    data() {
        return {
            satelliteImgRect: null,
            navOptions: {
                enableCompass: true,
                enableZoomControl: true,
                // enableZoomControl: {
                //   // 缩放比例
                //    zoomAmount: 2,
                //   // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是经纬度{lng: number, lat: number, height: number}或者 rectangle{west: number,south: number,east: number,north: number}
                //   defaultResetView: {
                //     lng: 105, lat: 29.999999999999993, height: 19059568.497290563, heading: 360, pitch: -90, roll: 0
                //   },
                //   overrideCamera: false
                // },
                enableDistanceLegend: true,
                enableLocationBar: true,
                // enableLocationBar: {
                //   // 获取更精确的高程
                //   gridFileUrl: './statics/SampleData/WW15MGH.DAC'
                // },
                enableCompassOuterRing: true,
                enablePrintView: true,
                // enablePrintView: {
                //   // 是否添加 Credit
                //   showCredit: true,
                //   // 是否自动打印
                //   printAutomatically: false
                // },
                enableMyLocation: true,
                // enableMyLocation: {
                //     // 使用高德api定位
                //     amap: {
                //         key: '42d22e6ed83f077bc28b7864718726de'
                //     }
                // }
            },
            sceneMode: 3,
            sceneModePicker: true,
            animation: true,
            timeline: false,
            baseLayerPicker: false,
            homeButton: true,
            fullscreenButton: true,
            infoBox: true,
            fullscreenElement: document.body,
            tk: "e7894a985fe457b58ef9c65beae0619a", /// 天地图浏览器端令牌token http://console.tianditu.gov.cn/api/key
            viewer: null,
        }
    },
    created() {
        //debug
        // this.$refs.vcViewer.createPromise.then(({Cesium, viewer}) => {
        //   console.log('viewer is loaded.')
        // })
    },
    methods: {
        ready(cesiumInstance) {
            const {Cesium, viewer} = cesiumInstance
            this.sceneMode = Cesium.SceneMode.SCENE3D
            Cesium.Camera.DEFAULT_VIEW_FACTOR = 0.3
            Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
                /* 左下角：经度，纬度 */
                65, 0,
                /* 右上角：经度，纬度 */
                140, 60
            )
            this.satelliteImgRect = Cesium.Rectangle.fromDegrees(65, 0, 140, 60)
            viewer.scene.globe.depthTestAgainstTerrain = true
            viewer.scene.globe.enableLighting = true
            this.fullscreenElement = this.$refs.viewerContainer
            viewer.entities.add({
                id: "北京市",
                position: Cesium.Cartesian3.fromDegrees(116.39, 39.9, 2*1000),
                billboard: new Cesium.BillboardGraphics({
                    disableDepthTestDistance: Number.POSITIVE_INFINITY, //备注:避免3D图层遮挡billboard图
                    image: STAR_PNG,
                    scale: 0.25,
                }),
                label: new Cesium.LabelGraphics({
                    text: "北京",
                    font: "24px sans-serif",
                    horizontalOrigin: 1,
                    outlineColor: new Cesium.Color(0, 0, 0, 1),
                    outlineWidth: 2,
                    pixelOffset: new Cesium.Cartesian2(17, -5),
                    disableDepthTestDistance: Number.POSITIVE_INFINITY, //备注:避免3D图层遮挡label文字
                    style: Cesium.LabelStyle.FILL,
                }),
            })
            viewer.camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(111.07, 39.05, 5000*1000),
                orientation: {
                    heading : Cesium.Math.toRadians(0),
                    pitch : Cesium.Math.toRadians(-90),
                    roll : Cesium.Math.toRadians(0)
                },
            })
            //强制隐藏cesium控件版权信息
            viewer._cesiumWidget._creditContainer.style.display = "none"
        },
    },
}
</script>

<style lang="stylus" scoped>
@import '~cesium/Build/Cesium/Widgets/widgets.css'
@import '~vue-cesium/lib/vc-navigation.css'

.mainContainer
    position: relative
    width: 100%
    height: 100%
    margin: 0
    border-width: 0 // border: solid 5px green
    padding: 0

    ul
        list-style: none

    .mapOptionContainer
        position: absolute
        top: 5px
        left: 5px
        z-index: 100
        background-color: rgba(255, 255, 255, 0.625)
        border: solid 1px white
        padding: 10px
        box-shadow: 0 0 5px 5px rgba(255, 255, 255, 0.5)

    .viewer
        z-index: 0
        position: absolute
        top: 0
        bottom: 0
        left: 0
        right: 0
</style>
